<template>
  <el-container class="container-box">
    <el-header height="80px">
      <el-row>
        <el-col :span="5">
          <div class="logo-box">
            <el-image style="width: 60px; height: 60px" :src="require('@/assets/imgs/certificat-book.png')"></el-image>
            <span style="padding-left:10px">律学堂</span>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="top-box">
            <el-menu class="el-menu-demo" mode="horizontal" :default-active="active" active-text-color="#266FFF"
              :router="true">
              <el-menu-item v-for="(item) in routelist" :key="item.path" :index="'/' + item.path">
                <div class="title-box">{{ item.meta.title }}</div>
                <div class="menu-box"></div>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="avatar-box">
            <el-dropdown>
              <div class="el-dropdown-link">
                <el-image style="width: 40px; height: 40px;border-radius: 50px;"
                  :src="require('@/assets/imgs/avatar.png')"></el-image>
                <span style="padding-left:10px">管理员</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
                <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding:0;background-color: #FAFAFA;">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </el-main>
    <el-footer height="80px" style="padding:0">
      <FooterView />
    </el-footer>
  </el-container>
</template>
<script>
import router from '@/router/index.js';
import FooterView from './FooterView.vue';
export default {
  components: {
    FooterView
  },
  data() {
    return {

    }
  },
  created() {
    // console.log('当前的路由', this.$route);
  },
  computed: {
    routelist() {



      let eldata = router.options.routes[0].children.filter((item) => {
        return item.hidden == undefined || !item.hidden
      })

      console.log('过滤路由表', eldata);

      return eldata
    },
    active() {
      if (this.$route.meta.activeMenu) {
        return this.$route.meta.activeMenu
      } else {
        return this.$route.path
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container-box {
  height: 100vh;


  .logo-box {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: flex-end;
    font-weight: bolder;
    padding-right: 40px;
    font-size: 28px;
  }

  .avatar-box {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-dropdown-link {
      display: flex;
      align-items: center;
    }
  }
}

/**el-menu默认样式 */
.el-menu {
  border-bottom: 0;
  height: 80px;

  .el-menu-item {
    font-size: 16px;
    height: 60px;
    font-weight: bolder;
    color: #000;
    border: none;

    .title-box {
      height: 50px;
    }
  }

  .is-active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .menu-box {
      width: 100%;
      height: 7px;
      background-color: #266FFF;
      border-radius: 5px;
    }

  }


}
</style>